<!--
 * @Descripttion: 
 * @Author: liujing
 * @Date: 2021-07-15 14:16:39
 * @LastEditTime: 2021-09-24 17:39:52
-->
<template>
  <!-- 如果当前 subroute 有子节点 -->

  <el-submenu
    v-if="
      !subroute.hidden && subroute.children && subroute.children.length >= 0
    "
    :key="id"
    :index="id"
  >
    <!-- 创建菜单分组 -->
    <template slot="title">
      <i :class="subroute.meta.icon" style="color:black"></i>
      <span slot="title">{{ subroute.meta.title }}</span>
    </template>
    <!-- 递归调用自身，直到 subroute 不含子节点 -->
    <SidebarItem
      v-for="(submenu, subidx) in subroute.children"
      :subroute="submenu"
      :fatherpath="genPath(fatherpath, subroute.path)"
      :barIdx="subidx"
      :key="barIdx + '-' + subidx"
      :index="barIdx + '-' + subidx"
    />
  </el-submenu>

  <!-- 当前节点不含子节点且非隐藏 -->
  <el-menu-item
    style="font-weight: 400;margin-left:20px"
    v-else-if="!subroute.hidden && subroute.meta"
    :index="genPath(fatherpath, subroute.path)"
    >{{ subroute.meta.title }}
  </el-menu-item>

  <!-- <el-menu-item
    style="font-weight: 400"
    v-else
    :index="genPath(fatherpath, subroute.path)"
    >{{ subroute.meta.title }}
  </el-menu-item> -->
</template>

<script>
export default {
  name: "SidebarItem",
  props: {
    subroute: {
      type: Object
    },
    barIdx: {
      type: Number
    },
    fatherpath: {
      type: String
    }
  },
  computed: {
    // 默认激活的路由, 用来激活菜单选中状态
    defaultActive: function() {
      return this.$route.path;
    }
  },
  data() {
    return { id: "" };
  },
  mounted() {
    this.id = this.barIdx.toString();
  },
  methods: {
    // 生成侧边栏路由，格式: /a/b/c
    genPath() {
      let arr = [...arguments];
      let path = arr
        .map(v => {
          while (v[0] === "/") {
            v = v.substring(1);
          }
          while (v[-1] === "/") {
            v = v.substring(0, v.length);
          }
          return v;
        })
        .join("/");
      path = path[0] === "/" ? path : "/" + path;
      return path;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
  min-height: 400px;
}
</style>
